<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>未满18岁人士请在父母指导下进入</title>
<link rel="stylesheet" href="bs/css/bootstrap.css">
<script src="bs/js/jquery-3.3.1.min.js"></script>
<script src="bs/js/bootstrap.min.js"></script>
<script src="bs/js/Snow.js"></script>
<style>
.container {
	background-color: bg-danger;
	width: 1280px !important;
	max-width: none !important;
}

.row {
	margin-bottom: 15px;
}

body {
	padding-top: 30px;
	font-size: 15px;
	background-image: url("bs/image/kk.jpg");
}

.detail {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	height: 110px;
	width: 100%; //
	border: 1px solid black;
}

.caption {
	position: relative;
}

.keyWord {
	position: absolute;
	top: 0px;
	right: 0px;
}
</style>
</head>
<body>
	<div class="container">
		<h2 class="page-header">
			<span style="color: gray;">半岛铁头</span> <small>Author:Lgw</small>
		</h2>
		<div class="row col-xs-12">
			<img alt="" src="bs/image/xuan.gif" width="100px"
				class="img-thumbnail">
		</div>
		<div class="glyphicon glyphicon-thumbs-up"></div>

		<!-- 搜索框-->
		<div class="col-md-4" style="margin-left: 68%; margin-top: -50px">
			<form action="/index" method="post">
				<div class="search input-group">
					<input type="text" class="form-control"
						placeholder="${query==null ? 'Search for...':query}" name="query">
					<span class="input-group-btn">
						<button class="btn btn-default" type="submit">
							<span class="glyphicon glyphicon-search"></span>
						</button>
					</span>
				</div>
			</form>
		</div>

		<!--导航条-->
		<!--顶部元素-->
		<nav class="navbar navbar-inverse navbar-fixed-top">
			<div class="navbar-header">
				<a href="#" class="navbar-brand"><img alt="" class=""
					src="bs/image/nnna.gif" width="39px"></a>
				<button class="navbar-toggle collapsed" data-toggle="collapse"
					data-target="#mynavbar">
					<span class="icon-bar"></span> <span class="icon-bar"></span> <span
						class="icon-bar"></span>
				</button>
			</div>
			<div id="mynavbar" class="collapse navbar-collapse">
				<ul class="nav navbar-nav">
					<li><a href="/index">首页</a></li>
					<li><a href="/music">音乐</a></li>
					<li><a href="/movie">电影</a></li>
					<li><a href="/games">游戏</a></li>
					<li><a href="/guestBook">留言板</a></li>
				</ul>
				<ul class="nav navbar-nav navbar-right">
					<li><a data-toggle="dropdown" style="margin-right: 10px;"><span>更多<span
								class="caret"></span>
						</span> </a>
						<ul class="dropdown-menu">
							<li><a href="/admin">博客管理</a></li>
							<li><a href="">关于我</a></li>
							<li class="divider"></li>
							<li><a href="/酒仙网/js/酒仙网.html">酒仙网  zc</a></li>
							<li><a href="http://www.baidu.com">百度</a></li>
							<li><a href="http://www.google.com">Google</a></li>
						</ul></li>
				</ul>
			</div>
		</nav>
		<div class="">
			<div class="row">
				<div class="col-xs-12">
					<c:forEach items="${article}" var="art">
						<div class="thumbnail">
							<div class="caption">
								<h3>${art.articleName }</h3>
								<button type="button" class="keyWord btn btn-default">
									<span class="glyphicon glyphicon-star" aria-hidden="true"></span>
									${art.keyWord }
								</button>
								<p>
								<div class="detail">${art.content }</div>
								</p>
								<p>
									<a href="/showArticle?id=${art.id }"
										class="btn btn-primary" role="button">阅读全文</a> <a
										style="display: block; text-align: right;"><fmt:formatDate
											value="${art.writeDate}" pattern="yyyy-MM-dd HH:mm:ss" /></a>
								</p>
							</div>
						</div>
					</c:forEach>
				</div>
				<nav aria-label="Page navigation">
					<ul class="pagination" style="margin-left: 30%; margin-top: 0px">
						<!--把后台传来的 查询条件 取出来 拼在后面-->
						<li><a
							href="/index?page=${pageInfo.prePage }&query=${query}"
							aria-label="Previous"> <span aria-hidden="true">&laquo;</span>
						</a></li>
						<c:forEach begin="1" step="1" end="${pageInfo.pages }" var="i">
							<li class="${i eq pageInfo.pageNum ? 'active':''}"><a
								href="/index?page=${i }&query=${query}">${i }</a></li>
						</c:forEach>
						<li><a
							href="/index?page=${pageInfo.nextPage}&query=${query}"
							aria-label="Next"> <span aria-hidden="true">&raquo;</span>
						</a></li>
					</ul>
					<div
						style="font-weight: 700; font-family: cursive; margin-left: 1080px; margin-top: -50px"
						class="text-warning">Total：${pageInfo.total }</div>
				</nav>
			</div>
		</div>
	</div>
</body>
</html>